<!--
TODO:
* Open user Account Info panel on start
* auto-hide after delay mode
* auto-show on updates mode
* always on top mode
* Soft restart
* Feature: option to NOT save password
* auto-completing usernames when typing "@" or "d "
* Feature: View Favorites
* Feature: block users
* snap-to-edge of screen	
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Spaz</title>


	<!-- <script src="SpryAssets/SpryDebug.js" type="text/javascript"></script>
		<link href="SpryAssets/SpryDebug.css" rel="stylesheet" type="text/css" /> -->

	<link rel="stylesheet" href="assets/init.css" type="text/css" media="screen" charset="utf-8" />


	<!-- Spry libs -->
	<script language="JavaScript" type="text/javascript" src="SpryAssets/xpath.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryData.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryNestedXMLDataSet.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryJSONDataSet.js"></script>
	<script language="javascript" src="SpryAssets/SpryEffects.js" type="text/javascript"></script>


	<!-- Spry Widgets -->
	<script language="JavaScript" type="text/javascript" src="SpryAssets/widgets/tabbedpanels/SpryTabbedPanels.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/widgets/textareavalidation/SpryValidationTextarea.js" ></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/widgets/textfieldvalidation/SpryValidationTextField.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/widgets/collapsiblepanel/SpryCollapsiblePanel.js"></script>
	<script language="JavaScript" type="text/javascript" src="SpryAssets/widgets/htmlpanel/SpryHTMLPanel.js"></script>
	<link rel="stylesheet" type="text/css" href="SpryAssets/widgets/tabbedpanels/SpryTabbedPanels.css" />
	<link rel="stylesheet" type="text/css" href="SpryAssets/widgets/textareavalidation/SpryValidationTextarea.css" />
	<link rel="stylesheet" type="text/css" href="SpryAssets/widgets/textareavalidation/SpryValidationTextField.css" />
	<link rel="stylesheet" type="text/css" href="SpryAssets/widgets/htmlpanel/SpryHTMLPanels.css" />


	<!-- base64 encoding lib -->
	<script src="assets/webtoolkit.base64.js" type="text/javascript"></script>



	<!-- jQuery libs -->
	<script src="assets/jquery-1.2.1.js" type="text/javascript"></script>
	<script src="assets/jquery.tooltip/jquery.dimensions.js" type="text/javascript"></script>
	<script src="assets/jquery.tooltip/jquery.tooltip.js" type="text/javascript"></script>
	<script src="assets/jquery.moreSelectors.js" type="text/javascript"></script>
	<script src="assets/jquery.contextmenu.r2.js" type="text/javascript" charset="utf-8"></script>


	<!-- jQuery.UI libs -->
	<script src="assets/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>


	<!-- Spaz libs -->
	<script src="assets/spaz.js"        type="text/javascript"></script>
	<script src="assets/spaz.data.js"   type="text/javascript"></script>
	<script src="assets/spaz.debug.js"  type="text/javascript"></script>
	<script src="assets/spaz.cache.js"  type="text/javascript"></script>
	<script src="assets/spaz.ui.js"     type="text/javascript"></script>
	<script src="assets/spaz.update.js" type="text/javascript"></script>
	<script src="assets/spaz.bridge.js" type="text/javascript"></script>
	<script src="assets/spaz.notify.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="lib/library.swf" type="application/x-shockwave-flash"></script> -->

	<!-- User CSS override file -->
	<style type="text/css" media="screen" id="UserCSSOverride"></style>
	
	
	<!-- theme scripts -->
	<script type="text/javascript" charset="utf-8" id="themejs"></script>
	<script type="text/javascript" charset="utf-8" id="themeinfo"></script>

	<!-- Firebug lite -->
	<script language="javascript" type="text/javascript" src="assets/firebug/firebug.js"></script>

	<!-- Showdown -->
	<script src="assets/showdown.js" type="text/javascript" charset="utf-8"></script>
	

	<script type="text/javascript" charset="utf-8">
		// We do this WELL before the DOM is ready, otherwise
		// Spry will freak the fuck out
		Spaz.Data.makeDataSets();
	</script>
</head>

<body id="home">

<div id="container">



<h1 id="header" onmousedown="Spaz.UI.onNativeMove();">
	<div id="window-buttons">
		<span id="about" class="window-button" onclick="Spaz.UI.showAbout()" title="About">i</span>
		<span id="help" class="window-button" onclick="Spaz.UI.showHelp()" title="Help">?</span>
		<span id="minimize" class="window-button" onclick="Spaz.UI.windowMinimize()" title="Minimize">&ndash;</span>
		<span id="close" class="window-button" onclick="Spaz.Bridge.windowClosingHandler()" title="Close">&times;</span>
	</div>
	<span id="header-label">Spaz</span>
</h1>


<!-- 
	Spaz.Content.friends = {
		index:		0,
		tabid:		'tab-friends',
		panelid:	'panel-friends',
		ds:			Spaz.Data.ds_friends,
		region:		
		
	}
	Spaz.Content.replies = {
		index:		1,
		tabid:		'tab-replies',
		panelid:	'panel-replies',
		ds:			Spaz.Data.ds_replies,
		region:		
	}
	Spaz.Content.dms = {
		index:		1,
		tabid:		'tab-dms',
		panelid:	'panel-dms',
		ds:			Spaz.Data.ds_dms,
		region:		
	}
	 -->


<div id="tabs" class="TabbedPanels">
	<ul class="TabbedPanelsTabGroup" id="timeline-tabs" tabindex="0">
		<!-- YOUR TIMELINE -->
		<li class="TabbedPanelsTab" tabindex="0" 
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-friends" onclick="Spaz.UI.setSelectedTab(this)"><img title="Your timeline" class="tab-icon" src="{theme-dir}/images/tab-icon-timeline.png" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>
		<!-- REPLIES -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-replies" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-replies.png" title="Replies directed at you" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>
		<!-- DMs -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-dms" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-dms.png" title="Direct messages you've received" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>
		<!-- SEND STATUSES -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-user" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-user.png" title="Tweets you've sent" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>
		<!-- PUBLIC -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-public" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-public.png" title="Public timeline" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>

		<!-- FOLLOWING LIST -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-friendslist" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-following.png" title="Users you are following" /> <a 
			class='reload-button' onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>		
		<!-- FOLLOWERS LIST -->
		<li class="TabbedPanelsTab" tabindex="0"
			onmouseover="$('a.reload-button', '#'+this.id).show()" 
			onmouseout="$('a.reload-button', '#'+this.id).hide()"
			id="tab-followerslist" onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-followers.png" title="Users following you" /> <a class='reload-button' 
			onclick='Spaz.Data.loadDataForTab(this.parentElement);' title="Reload this tab">&#x21A9;</a></li>
		
		<!-- PREFS -->
		<li class="TabbedPanelsTab" tabindex="0" id="tab-prefs" 
			onclick="Spaz.UI.setSelectedTab(this)"><img class="tab-icon" src="{theme-dir}/images/tab-icon-prefs.png" title="Preferences" /></li>
	</ul>
	
	
	
	
	<!-- BEGIN CONTENT TABS -->
	<div class="TabbedPanelsContentGroup" id="timeline-tabs-content">

		<!-- FRIENDS AND YOU TIMELINE -->
		<div class="TabbedPanelsContent" id="panel-friends">
			<div spry:region="Spaz.Data.ds_friends" id="friends-timeline" class="timeline SpryHiddenRegion">
				
				<div spry:repeat="Spaz.Data.ds_friends" class="timeline-entry" spry:odd="odd" spry:even="even">
					<div class="user" id="user-{user/id}">
						<div class="user-image"><a title='<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}' onclick='openInBrowser("http://twitter.com/{user/screen_name}")'><img height="48" width="48" src="{user/profile_image_url}" alt='{user/screen_name}' /></a></div>
						<div class="user-screen-name"><a onclick='openInBrowser("http://twitter.com/{user/screen_name}")' title='<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}'>{user/screen_name}</a></div>
					</div>
			
					<div class="status" id="status-{id}">
						<div class="status-text" id="#status-text-{id}">{text}</div>
						<div class="status-actions"><a title="Make this message a favorite" onclick="Spaz.Data.makeFavorite('{id}')" id="status={id}-fav"><img src="{theme-dir}/images/status-fav-off.png" /></a> <a title="Send direct message to this user" onclick='Spaz.UI.prepDirectMessage("{user/screen_name}")' class="status-action-dm" id="status-{id}-dm"><img src="{theme-dir}/images/status-dm.png" /></a> <a title="Send reply to this user" onclick="Spaz.UI.prepReply('{user/screen_name}')" class="status-action-reply" id="status-{id}-reply"><img src='{theme-dir}/images/status-reply.png' /></a></div>
						<div class="status-link"><a onclick="openInBrowser('http://twitter.com/{user/screen_name}/statuses/{id}/')" title="View full post in browser"><span class="status-created-at">{created_at}</span></a> <span class="status-source">from <span class="status-source-label">{source}</span></span> <span class="status-protected">{user/protected}</span></div>
					</div>
				</div>
				
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>


		<!-- REPLIES TIMELINE -->
		<div class="TabbedPanelsContent" id="panel-replies">
			
			<div spry:region="Spaz.Data.ds_replies" id="replies-timeline" class="timeline SpryHiddenRegion">
				
				<div spry:repeat="Spaz.Data.ds_replies" class="timeline-entry" spry:odd="odd" spry:even="even">
					<div class="user" id="user-{user/id}">
						<div class="user-image"><a title="<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}"><img height="48" width="48" src="{user/profile_image_url}" alt="{user/screen_name}" onclick='openInBrowser("http://twitter.com/{user/screen_name}")' /></a></div>
						<div class="user-screen-name"><a onclick='openInBrowser("http://twitter.com/{user/screen_name}")' title="<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}">{user/screen_name}</a></div>
					</div>
			
					<div class="status" id="status-{id}">					
						<div class="status-text" id="#status-text-{id}">{text}</div>
						<div class="status-actions"><a title="Make this message a favorite" onclick="Spaz.Data.makeFavorite('{id}')" id="status={id}-fav"><img src="{theme-dir}/images/status-fav-off.png" /></a> <a title="Send direct message to this user" onclick='Spaz.UI.prepDirectMessage("{user/screen_name}")' class="status-action-dm" id="status-{id}-dm"><img src="{theme-dir}/images/status-dm.png" /></a> <a title="Send reply to this user" onclick="Spaz.UI.prepReply('{user/screen_name}')" class="status-action-reply" id="status-{id}-reply"><img src='{theme-dir}/images/status-reply.png' /></a></div>
						<div class="status-link"><a onclick="openInBrowser('http://twitter.com/{user/screen_name}/statuses/{id}/')" title="View full post in browser"><span class="status-created-at">{created_at}</span></a> <span class="status-source">from <span class="status-source-label">{source}</span></span> <span class="status-protected">{user/protected}</span></div>
						
					</div>
				</div>
				
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>

		
		<!-- DIRECT MESSAGES -->
		<div class="TabbedPanelsContent" id="panel-dms">
			
			<div spry:region="Spaz.Data.ds_dms" id="dm-timeline" class="timeline SpryHiddenRegion">
				
				<div spry:repeat="Spaz.Data.ds_dms" class="timeline-entry" spry:odd="odd" spry:even="even">
					<div class="user" id="user-{sender/id}">
						<div class="user-image"><a title="<strong>{sender/name}</strong><br /><em>{sender/location}</em><br />{sender/description}"><img height="48" width="48" src="{sender/profile_image_url}" alt="{sender/screen_name}" onclick='openInBrowser("http://twitter.com/{sender/screen_name}")' /></a></div>
						<div class="user-screen-name"><a onclick='openInBrowser("http://twitter.com/{sender/screen_name}")' title="<strong>{sender/name}</strong><br /><em>{sender/location}</em><br />{sender/description}">{sender/screen_name}</a></div>
					</div>
			
					<div class="status" id="status-{id}">					
						<div class="status-text" id="#status-text-{id}">{text}</div>
						<div class="status-actions"><a title="Send direct message to this user" onclick='Spaz.UI.prepDirectMessage("{sender/screen_name}")' class="status-action-dm" id="status-{id}-dm"><img src="{theme-dir}/images/status-dm.png" /></a></div>
						<div class="status-link"><a onclick="openInBrowser('http://twitter.com/{sender/screen_name}/statuses/{id}/')" title="View full post in browser"><span class="status-created-at">{created_at}</span></a> <span class="status-protected">{sender/protected}</span></div>
					</div>
				</div>
				
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>

		
		<!-- YOUR SENT MESSAGES -->
		<div class="TabbedPanelsContent" id="panel-user">
			<div spry:region="Spaz.Data.ds_user" id="user-timeline" class="timeline SpryHiddenRegion">				
				<div spry:repeat="Spaz.Data.ds_user" class="timeline-entry" spry:odd="odd" spry:even="even">
					<div class="user" id="user-{user/id}">
						<div class="user-image"><a title="<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}"><img height="48" width="48" src="{user/profile_image_url}" alt="{user/screen_name}" onclick='openInBrowser("http://twitter.com/{user/screen_name}")' /></a></div>
						<div class="user-screen-name"><a onclick='openInBrowser("http://twitter.com/{user/screen_name}")' title="<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}">{user/screen_name}</a></div>
					</div>
			
					<div class="status" id="status-{id}">					
						<div class="status-text" id="#status-text-{id}">{text}</div>
						<div class="status-actions"><a onclick="Spaz.Data.destroyStatus('{id}')" title="Delete this status" class="status-action-delete">delete</a></div>
						<div class="status-link"><a onclick="openInBrowser('http://twitter.com/{user/screen_name}/statuses/{id}/')" title="View full post in browser"><span class="status-created-at">{created_at}</span></a> <span class="status-source">from <span class="status-source-label">{source}</span></span> <span class="status-protected">{user/protected}</span></div>
					</div>
				</div>
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>

		
		<!-- PUBLIC TIMELINE -->
		<div class="TabbedPanelsContent" id="panel-public">
			<div spry:region="Spaz.Data.ds_public" id="public-timeline" class="timeline SpryHiddenRegion">
				<div spry:repeat="Spaz.Data.ds_public" class="timeline-entry" spry:odd="odd" spry:even="even">
					<div class="user" id="user-{user/id}">
						<div class="user-image"><a title="<strong>{user/name}</strong><br /><em>{user/location}</em><br/>{user/description}"><img height="48" width="48" src="{user/profile_image_url}" alt="{user/screen_name}" onclick='openInBrowser("http://twitter.com/{user/screen_name}")' /></a></div>
						<div class="user-screen-name"><a onclick='openInBrowser("http://twitter.com/{user/screen_name}")' title="<strong>{user/name}</strong><br /><em>{user/location}</em><br />{user/description}">{user/screen_name}</a></div>
					</div>
			
					<div class="status" id="status-{id}">						
						<div class="status-text" id="#status-text-{id}">{text}</div>
						<div class="status-actions"><a title="Make this message a favorite" onclick="Spaz.Data.makeFavorite('{id}')" id="status={id}-fav"><img src="{theme-dir}/images/status-fav-off.png" /></a> <a title="Send direct message to this user" onclick='Spaz.UI.prepDirectMessage("{user/screen_name}")' class="status-action-dm" id="status-{id}-dm"><img src="{theme-dir}/images/status-dm.png" /></a> <a title="Send reply to this user" onclick="Spaz.UI.prepReply('{user/screen_name}')" class="status-action-reply" id="status-{id}-reply"><img src='{theme-dir}/images/status-reply.png' /></a></div>
						<div class="status-link"><a onclick="openInBrowser('http://twitter.com/{user/screen_name}/statuses/{id}/')" title="View full post in browser"><span class="status-created-at">{created_at}</span></a> <span class="status-source">from <span class="status-source-label">{source}</span></span> <span class="status-protected">{user/protected}</span></div>
						
					</div>
				</div>
			</div>
		</div>
		
		
		
		<!-- LIST OF PEOPLE YOU ARE FOLLOWING -->
		<div class="TabbedPanelsContent" id="panel-friendslist">
			<div class="timeline directory">
				<div id="friendslist-detail" spry:detailregion="Spaz.Data.ds_friendslist" class="SpryHiddenRegion">
					<div class="user-image"><a title="Click to open profile in browser" onclick='openInBrowser("http://twitter.com/{screen_name}")'><img height="48" width="48" src="{profile_image_url}" alt="{screen_name}" /></a></div>
					<div class="user-list-details">
						<h2>{name} ({screen_name})</h2>
						<div class="user-location"><a onclick="Spaz.UI.showLocationOnMap('{location}')" title="Open this location on Yahoo! Maps in broswer">{location}</a></div>
						
						<div class="user-description">{description}</div>
						<div class="user-menu"><a onclick="Spaz.Data.followUser('{screen_name}')" class="follow">Follow</a> <a onclick="Spaz.Data.stopFollowingUser('{screen_name}')" class="stop-follow">Stop Following</a> <a onclick='Spaz.UI.prepDirectMessage("{screen_name}")' class="dm">DM</a> <a onclick="Spaz.UI.prepReply('{screen_name}')" class="reply">Reply</a></div>
						<div class="status-text" id="#status-text-{id}"><strong>Last update:</strong> {status/text}</div>
					</div>
				</div>
				<div id="friendslist" class="user-list" spry:region="Spaz.Data.ds_friendslist">
					<div class="user-list-wrapper">
						<div spry:repeat="Spaz.Data.ds_friendslist" spry:setrow="Spaz.Data.ds_friendslist"  class="user" id="friends-user-{id}">
							<div class="user-image"><a title="{screen_name}"><img height="48" width="48" src="{profile_image_url}" alt="{screen_name}"  /></a></div>
							<div class="user-screen-name" id="friends-user-screen-name-{id}" title="{name}">{screen_name}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>
		
		
		
		<!-- LIST OF FOLLOWERS -->
		<div class="TabbedPanelsContent" id="panel-followerslist">
			<div class="timeline directory">
				<div id="followerslist-detail" spry:detailregion="Spaz.Data.ds_followerslist" class="SpryHiddenRegion">
					<div class="user-image"><a title="Click to open profile in browser" onclick='openInBrowser("http://twitter.com/{screen_name}")'><img height="48" width="48" src="{profile_image_url}" alt="{screen_name}" /></a></div>
					<div class="user-list-details">
						<h2>{name} ({screen_name})</h2>
						<div class="user-location"><a onclick="Spaz.UI.showLocationOnMap('{location}')" title="Open this location on Yahoo! Maps in broswer">{location}</a></div>
						<div class="user-description">{description}</div>
						
						<div class="user-menu"><a onclick="Spaz.Data.followUser('{screen_name}')" class="follow">Follow</a> <a onclick="Spaz.Data.stopFollowingUser('{screen_name}')" class="stop-follow">Stop Following</a> <a onclick='Spaz.UI.prepDirectMessage("{screen_name}")' class="dm">DM</a> <a onclick="Spaz.UI.prepReply('{screen_name}')" class="reply">Reply</a></div>
						<div class="status-text" id="#status-text-{id}"><strong>Last update:</strong> {status/text}</div>
					</div>
				</div>
				<div id="followerslist" class="user-list" spry:region="Spaz.Data.ds_followerslist">
					<div class="user-list-wrapper">
						<div spry:repeat="Spaz.Data.ds_followerslist" spry:setrow="Spaz.Data.ds_followerslist"  class="user" id="followers-user-{id}">
							<div class="user-image"><a title="{name}"><img height="48" width="48" src="{profile_image_url}" alt="{screen_name}" /></a></div>
							<div class="user-screen-name" id="followers-user-screen-name-{id}" title="{name}">{screen_name}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="timeline-pager">
				<div class="timeline-pager-left"><a onclick="Spaz.UI.pageLeft(Spaz.UI.selectedTab);" title="Load newer entries">&laquo;</a></div>				
				<div class="timeline-pager-right"><a onclick="Spaz.UI.pageRight(Spaz.UI.selectedTab);" title="Load older entries">&raquo;</a></div>
				<div class="timeline-pager-info">page <span class="timeline-pager-number">1</span></div>
			</div>
		</div>
		
		
		<!-- PREFS -->
		<div class="TabbedPanelsContent" id="panel-prefs">
			<div class="timeline" id="prefs-timeline">
				<form id="prefs-form" onsubmit="Spaz.Bridge.setPrefs(); return false;">
				<div id="prefsCPG" class="CollapsiblePanelGroup">
					
					<div id="prefs-user-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Account Information</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="username">Username</label>
								<input type="text" name="username" id="prefs-username" value="" />
							</div>
							<div class="formrow">
								<label for="password">Password</label>
								<input type="password" name="password" id="prefs-password" value="" />
							</div>
						</div>
					</div>
					
					<div id="prefs-style-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Interface</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="user-stylesheet">User CSS</label>
								<input disabled="disabled" type="text" name="user-stylesheet" value="" id="prefs-user-stylesheet" />
								<input type="button" name="user-stylesheet-button" value="…" id="prefs-user-stylesheet-button" onclick="Spaz.UI.browseForUserCss()" />
								<input type="button" name="user-stylesheet-clear" value="&times;" id="prefs-user-stylesheet-clear" onclick="Spaz.UI.clearUserStyleSheet()" />
							</div>
							<div class="formrow">
								<label for="base-theme">Theme</label>
								<select id="prefs-base-theme" name="base-theme" onChange="Spaz.UI.setCurrentTheme()">
									<!-- stuff goes here -->
								</select> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<label for="base-theme">Opacity</label>
								<input type="text" onchange="Spaz.Bridge.checkWindowOpacity(this.value)"
									name="opacity-percentage" id="prefs-opacity-percentage"
									value="100" maxlength="3" size="3" />%
							</div>
							<div class="formrow">
								<input type="checkbox" name="markdown-enabled" value="1" id="prefs-markdown-enabled" onclick="Spaz.UI.setMarkdownState(this.checked)" />
								<label for="markdown-enabled" class="checkbox">Parse Markdown in messages</label> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<input type="checkbox" name="minimize-systray" value="1"
									id="prefs-minimize-systray"
									onclick="Spaz.UI.setMinimizeToSystray(this.checked)" />
								<label for="minimize-systray" class="checkbox">Minimize to Systray</label> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<input type="checkbox" name="minimize-background" value="1"
									id="prefs-minimize-background"
									onclick="Spaz.UI.setMinimizeOnBackground(this.checked)" />
								<label for="minimize-background" class="checkbox">Minimize when in background</label> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<input type="checkbox" name="maximize-foreground" value="1"
									id="prefs-maximize-foreground"
									onclick="Spaz.UI.setRestoreOnActivate(this.checked)" />
								<label for="maximize-foreground" class="checkbox">Restore when in foreground</label> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<input type="checkbox" name="notification-popups" value="1"
									id="prefs-show-notification-popups"
									onclick="Spaz.UI.setShowNotificationPopups(this.checked)" />
								<label for="notification-popups" class="checkbox">Show notification popups (alpha)</label> <!-- <span class="restart-required">*</span> -->
							</div>
							<!-- Spaz.Prefs.hideAfterDelay		= 1;
							Spaz.Prefs.restoreOnUpdates		= 1;
							Spaz.Prefs.minimizeToSystray	= 1;
							Spaz.Prefs.minimizeOnDeactivate	= 1;
							Spaz.Prefs.restoreOnActivate	= 1; -->
						</div>
					</div>
					
					<div id="prefs-sound-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Sound</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="sound-enabled">Play sounds</label>
								<input type="checkbox" name="sound-enabled" value="1" id="prefs-sound-enabled" onclick="Spaz.UI.setSoundState(this.checked)" />
							</div>
						</div>
					</div>
										
					<div id="prefs-upgrades-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Upgrades</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="sound-enabled">Check on startup</label>
								<input type="checkbox" name="checkupdate-enabled" value="1" id="prefs-checkupdate-enabled" onclick="Spaz.Update.setCheckUpdateState(this.checked)" />
								<input type="button" name="user-stylesheet-button" value="Check Now &bull;" id="prefs-checkupdate-button" onclick="Spaz.Bridge.checkForUpdate()" /> <span class="restart-required">*</span>
							</div>
						</div>
					</div>

					<div id="prefs-network-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Networking</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="refresh-interval">Refresh interval</label>
								<input type="text" onchange="Spaz.Bridge.checkRefreshPeriod(this.value)" name="refresh-interval" id="prefs-refresh-interval" value="2" maxlength="2" size="2" /> minutes

							</div>
							<div class="formrow">
								<input type="checkbox" name="handle-http-auth" value="1"
									id="prefs-handle-http-auth"
									onclick="Spaz.Bridge.setHandleHTTPAuth(this.checked)" />
								<label for="handle-http-auth" class="checkbox">Enable HTTP auth handling</label> <!-- <span class="restart-required">*</span> -->
							</div>
						</div>
					</div>
					
					<div id="prefs-debugging-fieldset" class="CollapsiblePanel">
						<h2 class="CollapsiblePanelTab" tabindex="0">Debugging</h2>
						<div class="CollapsiblePanelContent">
							<div class="formrow">
								<label for="debugging-enabled">Enabled</label>
								<input type="checkbox" name="debugging-enabled" value="1" id="prefs-debugging-enabled" onclick="Spaz.Bridge.setDebugEnable(this.checked)" /> <span class="restart-required">*</span>
							</div>
							<div class="formrow">
								<input type="button" id="prefs-console-button" name="open-console" value="Open Firebug console &bull;" onclick="console.open()" />
								<input type="button" id="prefs-dumphtml-button" name="dump-html" value="Dump HTML &bull;" onclick="Spaz.Debug.dumpHTML()" />
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="formrow" style="text-align:right; margin-top:15px">
					<div><span class="restart-required">*</span> <span class="prefs-restart-msg">restart required</span></div>
					<input type="button" id="prefs-update-button" name="update" value="Save Preferences &bull;"
						onclick="Spaz.Data.verifyPassword()" /> 
				</div>

				</form>

			</div>
		</div>
		
	</div>
</div>



<!-- ENTRYFORM -->
<form id="entryform" onSubmit="return false;">
	<textarea id="entrybox" onfocus='Spaz.UI.showEntryboxTip()' onblur='Spaz.UI.resetStatusBar()' tabindex="0"></textarea>
	<div id="entrystats"><span id="chars-left"></span> chars left</div>
	<input type="button" onclick="Spaz.UI.sendUpdate()" id="updateButton" value="Send &raquo;" />
</form>

<!-- STATUSBAR -->
<div id="statusbar" onmousedown="Spaz.UI.onNativeMove();">
	<!-- LOADING -->
	<span id='loading'><img src='{theme-dir}/images/loading.gif' /></span>
	<span id='statusbar-text'>Ready</span>
</div>


<div id="resize-sw" onmousedown="Spaz.UI.onResize()">
</div>



<!-- ABOUT -->


<div id="aboutWindow" class="popupWindow" style="display:none">
	<div class="popupWindowBar"><span class="window-button" onclick="Spaz.UI.hideAbout()" title="Close">&times;</span></div>
	<a onclick="openInBrowser('http://twitter.com/spaz/')"><img src="images/spaz-icon-alpha.png" width="64" height="64" id="spazIcon" /></a>
	<h2>Spaz</h2>
	<h3>A Twitter client for the Adobe Integrated Runtime</h3>
	<p><a href="http://funkatron.com/apps/spaz/AIR/whatsnew.html" target="_blank"><span id="about-version"></span> – What's new</a></p>

	<p>Created by <a onclick="openInBrowser('http://funkatron.com')">Ed Finkler, Funkatron Productions</a></p>

	<ul>
		<li><a onclick="openInBrowser('http://twitter.com/spaz/')">Spaz on Twitter</a></li>
		<li><a onclick="openInBrowser('http://funkatron.com/spaz/')">Spaz Homepage</a></li>
		<li><a onclick="openInBrowser('http://funkatron.com/apps/spaz/AIR/LICENSE.txt')">Spaz License</a></li>
	</ul>

	
	<div id="about-thanks">Special thanks to Alexandru Chiculita and the AIR engineering team</div>


	<h3>Libraries used</h3>
	<ul>
		<li><a onclick="openInBrowser('http://www.jquery.com/');">jQuery</a></li>
		<li><a onclick="openInBrowser('http://labs.adobe.com/technologies/spry/');">Spry</a></li>
		<li><a onclick="openInBrowser('http://www.getfirebug.com/lite.html');">Firebug Lite</a></li>
		<li><a onclick="openInBrowser('http://www.webtoolkit.info/javascript-md5.html');">Webtoolkit Base64</a></li>
		<li><a onclick="openInBrowser('http://www.attacklab.net/showdown-gui.html');">Showdown</a></li>
		<li><a onclick="openInBrowser('http://code.google.com/p/as3notificationlib/')l">as3notificationlib</a></li>
	</ul>
	
	<!-- <table id="sysinfo">
		<tr>
			<td class="label">OS</td>
			<td class="value" id="sysinfo-os"></td>
		</tr>
		<tr>
			<td class="label">Version</td>
			<td class="value" id="sysinfo-version"></td>
		</tr>
		<tr>
			<td class="label">Manufacturer</td>
			<td class="value" id="sysinfo-manufacturer"></td>
		</tr>
		<tr>
			<td class="label">Memory Used</td>
			<td class="value" id="sysinfo-totalMemory"></td>
		</tr>
	</table> -->	
</div>

<div id="helpWindow" class="popupWindow" style="display:none">
	<div class="popupWindowBar"><span class="window-button" onclick="Spaz.UI.hideHelp()" title="Close">&times;</span></div>
	<h2>Help</h2>

	<h3>Keyboard shortcuts</h3>
	<table id="help-shortcuts" class="data">
		<tbody>
			<tr>
				<th>key</th>
				<th>command</th>
			</tr>
			<tr>
				<td class="label">r</td>
				<td class="value">reload current view</td>
			</tr>
			<tr>
				<td class="label">l</td>
				<td class="value">open shorten link dialog</td>
			</tr>
			<tr>
				<td class="label">@ (SHIFT+2)</td>
				<td class="value">respond to sender of currently selected message</td>
			</tr>
			<tr>
				<td class="label">1-8</td>
				<td class="value">Switch to tab 1-8</td>
			</tr>
		</tbody>
	</table>	
</div>

<div id="shortLinkWindow" class="popupWindow" style="display:none">
	<div class="popupWindowBar"><span class="window-button" onclick="Spaz.UI.hideShortLink()" title="Close">&times;</span></div>
	<h2>Shorten Link</h2>
	<form id="shortenLink-form" onsubmit="Spaz.Data.shortenLink(); return false;">
		<div class="formrow">
			<label for="original-link">Link</label>
			<input type="text" name="original-link" id="shorten-original-link" value="http://" />
		</div>
		<div class="formrow">
			<label for="short-link">Short</label>
			<input type="text" name="short-link" id="shorten-short-link" value="" />
		</div>
		<div class="formrow" style="text-align:right; margin-top:15px">
			<span id="verification-result">&nbsp;</span>
			<input type="button" id="prefs-update-button" name="update" value="Shorten &bull;"
				onclick="Spaz.Data.shortenLink()" /> 
		</div>
	</form>
</div>


<div id="updateCheckWindow" class="popupWindow" style="display:none;"> 
	Checking for updates...
</div>



<div id="linkContextMenu" class="context-menu">
	<ul>
		<li id="menu-copyLink">Copy Link Address</li>
	</ul>
</div>


<!-- <div id="popupPanel" style="display:none">
	<div id="popupPanel-dragBar" style="text-align:right"><span id="popupPanel-close" onclick="Spaz.UI.closePopup">[X]</span></div>
	<div id="popupPanel-content">
		Here's some static content for the panel
	</div>
</div> -->



</div> <!-- End #container -->



<!-- CACHE -->
<div id="cache" style="display:none">
	<div id="sources">


	</div>

</div>


</div> <!-- <div id="cache"> -->






<script type="text/javascript">



	/**
	 * Default prefs vars
	 */
	var reloadID; // identifier for the auto-reloader
	// var memoryRefreshID; // identifier for the memory reporter

	var entryBoxHint = "What are you doing?";

	var toolTipPrefs = {
		track: false, 
		delay: 0, 
		showURL: false, 
		showBody: false,
		extraClass: "tab-tooltip",
		opacity: 0.8,
		top:15,
		left:8
	};

	/**
	Keyboard shortcut definitions
	**/
	document.onkeydown = Spaz.UI.keyboardHandler
	
	document.onmouseover = Spaz.UI.focusHandler
	document.onmouseout  = Spaz.UI.blurHandler
	


	/* This is stuff we do right after the document is ready */
	$(document).ready(function(){
	//window.onload = function(){
		Spaz.Bridge.$init(Spaz.childFrameInit);
	}); // end window.onload



	window.onload = function(){
	}


	/**
	 * Window manip funcs
	 */
	Spaz.UI.onNativeMove = function(){
		Spaz.Bridge.startMove();
	}
	Spaz.UI.onResize = function(){
		Spaz.Bridge.startResize();
	}
	


</script>

</body>
</html>
